<template>
	<div class="page">
		<view-box ref="viewBox" body-padding-bottom='64px'>
			<div class="date clearfix">
			<checker class='left' v-model="state" default-item-class="demo2-item" selected-item-class="demo2-item-selected" @on-change='selectTab'>
				<checker-item value="1">周</checker-item>
				<checker-item value="2">月</checker-item>
			</checker>
			<checker class='right' default-item-class="chart-item">
				<checker-item class='chart' value="1">图表</checker-item>
				<checker-item value="2" class='addmock' @on-item-click='toAddsugar'>
					<x-icon type="ios-plus" size="12" class="cell-x-icon"></x-icon>添加新数据
				</checker-item>
			</checker>
		</div>
		<transition name='fade' mode='out-in'>
			<components :is='currentTab' keep-alive></components>
		</transition>
		<div class="pwrap clearfix">
			<p class="p1 clearfix">*注</p>
			<p class="p2">空腹血糖（＜6.1mmol/L）</p>
			<p class="p3">餐后2小时（＜7.9mmol/L）</p>
			<p class="p4">随机血糖（＜11.1mmol/L）</p>
			<p class="p5">超过正常值范围</p>
		</div>
		</view-box>
	</div>
</template>

<script>
	import Week from './sugarsontab/Week.vue'
	import Month from './sugarsontab/Month.vue'
	export default {
		components: {
			Week,
			Month
		},
		data() {
			return {
				state: '1',
				currentTab: 'Week'
			}
		},
		methods: {
			selectTab(value) {
				if(value === '1') {
					this.currentTab = 'Week'
				} else if(value === '2') {
					this.currentTab = 'Month'
				}
			},
			toAddsugar(){
				this.$router.push({
					path: '/datamonitor/addsugar'
				})
			}
		},

	}
</script>

<style lang="less" scoped>
 @import './index.less';
</style>